import React, { useState } from "react";

export default function Father() {
  const [child1Name, setChild1Name] = useState(""); // 子组件1的状态提升到父组件
  const [child2Name, setChild2Name] = useState(""); // 子组件2的状态提升到父组件

  const handleChange = (val) => {
    setChild1Name(val);
  };
  return (
    <div>
      <Child1 name={child1Name} setChild2Name={setChild2Name} />
      <Child2 name={child2Name} onChange={handleChange} />
    </div>
  );
}

function Child1({ name, setChild2Name }) {
  return (
    <>
      <div>组件Child1 的 name 是 {name}</div>
      <div>
        子组件2的名字是：
        <input onChange={(e) => setChild2Name(e.target.value)} />
      </div>
    </>
  );
}

function Child2({ name, onChange }) {
  // 组件2 修改 组件1 的名字
  // 方法1：
  const handleChange = (e) => {
    onChange?.(e.target.value);
  };
  return (
    <>
      <div>组件Child2 的 name 是 {name}</div>
      <div>
        子组件1的名字是：
        <input onChange={handleChange} />
      </div>
    </>
  );
}
